<template>
	<view class="base_card animate__animated" hover-class="animate__bounceIn">
		<view class="cover">
			<view class="cover_img"><u-image width="100%" height="100%" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></u-image></view>
			<view class="top_right">
				<view class="blur_btn">
					<view>
						<text class="iconfont icon-bofang_" style="font-size: 10px;"></text>
						<text>3434万</text>
					</view>
				</view>
			</view>
			<view class="bottom_right"><text class="iconfont icon-bofang"></text></view>
		</view>
		<view class="bottom">抖断腿系列|后面的朋友让我看到你们的手机构根据哦是</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
		};
	}
};
</script>

<style lang="scss" scoped>
.base_card {
	width: 250rpx;
	height: auto;
	margin-right: 20.83rpx;
	.cover {
		width: 100%;
		height: 250rpx;
		position: relative;
		// border-radius: $main-border-radius;
		overflow: hidden;
		.cover_img {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}
		.top_right {
			position: absolute;
			right: 5.83rpx;
			top: 5.83rpx;
			padding: 0;
			z-index: 2;
			.blur_btn {
				height: 30rpx;
				padding: 0 5px;
				font-size: 20.16rpx;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 24px;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					background-color: rgba(0, 0, 0, 0.5);
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					filter: blur(35px);
				}
			}
		}
		.bottom_right {
			position: absolute;
			right: 20.83rpx;
			bottom: 20.83rpx;
			width: 62.5rpx;
			height: 62.5rpx;
			border-radius: 50%;
			background-color: rgb(242, 240, 244);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 29.16rpx;
			// color: $main-them-color;
			z-index: 2;
		}
	}
	.bottom {
		width: 100%;
		margin-top: 18.41rpx;
		font-size: 23.83rpx;
		// height: 50.16rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		letter-spacing: 1px;
		-webkit-line-clamp: 2//这里控制多少行;
	}
}
</style>
